<template>
<div>
    <!-- <v-header></v-header> -->
        <div>
            <div>
                <div class="box_bg">
                    <!-- 内容区域  开始 -->
                    <div class="components_con"  @keyup.enter="queryTable">
                        <!-- 查询开始 -->
                        <div class="components_searchs">
                            <span class="tit">标题：</span>
                            <el-input v-model.trim="table.queryParams.subject" auto-complete="off" placeholder="请输入流程标题"></el-input>

                            <span class="tit">所属流程：</span>
                            <el-select v-model="table.queryParams.businessCode" clearable filterable placeholder="请选择所属流程">
                                <el-option v-for="item in processList" :key="item.id" :label="item.name" :value="item.businessCode"></el-option>
                            </el-select>
                            
                            <!--
                            <span class="tit">审核状态：</span>
                            <el-select v-model="table.queryParams.flowState" clearable filterable placeholder="请选择审核状态">
                                <el-option v-for="item in flowStateList" :key="item.id" :label="item.text" :value="item.id"></el-option>
                            </el-select>
                            -->

                            <el-button type="primary" icon="el-icon-search" size="mini" @click="queryTable">查询</el-button>
                            <el-button type="primary" icon="el-icon-refresh" size="mini" @click="reset">重置</el-button>
                        </div>

                    </div>

                    <vue-table
                            :api-url="table.apiUrl"
                            :fields="table.fields"
                            :appendParams="table.queryParams"
                            :content="self"
                            ref="flowTable">
                    </vue-table>
                    <flow-examine ref="flowExamine"></flow-examine>
                </div>
            </div>
        </div>
        <!-- <v-footer></v-footer> -->

        <course-assessment-detail ref="courseAssessmentAdd"></course-assessment-detail>
        <teach-support-detail ref="courseAssessmentEdit"></teach-support-detail>
        <career-plan-detail ref="courseAssessmentDetail"></career-plan-detail>
</div>
</template>

<script>
    import Vue from 'vue'
    import { enums,constant } from '@/constant'
    import { mapGetters } from 'vuex'
    import flowExamine from './flow-examine'
    import courseAssessmentDetail from '../jx/courseassessmentscheme/course-assessment-detail.vue'
    import teachSupportDetail from '../jx/teachsupport/teach-support-detail.vue'
    import careerPlanDetail from '../jz/careerplan/career-plan-detail.vue'
    // import vHeader from '../../common/Header.vue';
    // import vFooter from '../../common/Footer.vue';
    export default {
        components: {
            flowExamine,
            courseAssessmentDetail,
            teachSupportDetail,
            careerPlanDetail
        },
        data() {
            return {
                self: this,
                flowStateList: enums.FLOW_STATE,    // 审核状态枚举
                // 班级表格
                table: {
                    apiUrl: api.flow.queryPage,
                    queryParams: {
                        subject:null,
                        businessCode:null,
                        flowState:  constant.FLOW_STATE.PENDING_APPROV,
                    },
                    fields: [
                        {
                            prop: "__component",
                            label: "标题",
                            componentName: "subjectDetailCom",
                        },
                        {
                            prop: "processName",
                            label: "所属流程",
                        },
                        {
                            prop: "currentFlow.nodeName",
                            label: "当前环节",
                        },
                        {
                            prop: "currentFlow.userName",
                            label: "当前处理人",
                        },
                        /* {
                            prop: "currentFlow.flowStateText",
                            label: "状态",
                        }, */
                        /* {
                            prop: "trainPlan.grade",
                            width: '80',
                            label: "年级",
                            formatter:function(row, column, cellValue){
                                return cellValue == null ? null : cellValue + "级";
                            }
                        }, */
                         {
                            prop: "__component",
                            label: "操作",
                            componentName: "flowActions",
                        },
                    ],
                },
                processList: null,
            };
        },
        created() {
            this.getAllProcess();
        },
        mounted() {
        },
        watch: {
            '$route.params.type':{
                handler(newVal, oldVal) {
                    if(newVal == "todo"){
                        this.table.queryParams.flowState = constant.FLOW_STATE.PENDING_APPROV;     //  待办
                    }
                    if(newVal == "done"){    //  审批过  (1,2) 进行中
                        this.table.queryParams.flowState = constant.FLOW_STATE.APPROVED;     //  已办
                    }
                    if(newVal == "finish"){   //  审批过 (1,2)  已完结
                        this.table.queryParams.flowState = constant.FLOW_STATE.APPROVED;     //  已完结
                    }
                    this.queryTable();
                },
               // deep:true,
               // immediate: true
            },
        },
        methods: {
            // 高级查询方法
            showMoreSearch(){
                if(this.moreSearchDisplay){
                    this.moreSearchDisplay = false
                }else{
                    this.moreSearchDisplay = true
                }

            },
            getAllProcess(){
                let vm = this;
                vm.axios.get(api.flow.queryAllProcess).then((response) => {
                    if (response.data.success) {
                        this.processList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            // 查询按钮
            queryTable() {
                this.$refs.flowTable.$emit('vuetable:refresh')
            },
            // 重置
            reset(){
                for(let key in this.table.queryParams){
                    this.table.queryParams[key] = null;
                }
                this.$refs.flowTable.$emit('vuetable:refresh')
            },
        },
    };
</script>
<style scoped>
    .main1{width: 100%;overflow: hidden;}
    .text {
        font-size: 14px;
    }
    .item {
        margin-bottom: 18px;
    }
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both;
    }
</style>


